<script>
import { CircleCheck, CircleCheckFilled } from '@element-plus/icons-vue'
import { getStudentList } from "../../api/class";
import { ElMessage } from 'element-plus'

export default {
    data() {
        return {
            tableData: [],
            currentPage: 1,
            class1Select: '',
            class2Select: '',
            currentData: [],
            arriveStu: 0,
            list1: [],
            list2: [],
        }
    },
    mounted() {
        // 初始化数据
        getStudentList().then(res => {
            this.tableData = res.data;
            let count = 0;

            this.tableData.forEach(item => {
                if (item.isArrive == '已出勤') {
                    count++;
                }
                // // 在互动频次后面加上 字符 次
                // item.interaction = item.interaction + '次';
                // // 将听课时长转成需要的格式
                // let h = parseInt(item.interaction / 60);
                // let m = item.interaction % 60;
                // item.listening = '';
                // if (h > 0) {
                //     item.listening = h + '小时';
                // }
                // if (m > 0) {
                //     item.listening = item.listening + m + '小时';
                // }
            })
            this.arriveStu = count;


            let list = res.data;
            // console.log(list);
            list.sort((a, b) => {
                return b.interaction - a.interaction
            });
            this.list1 = list.slice(0, 8);
            this.list1.map(item => {
                // 在互动频次后面加上 字符 次
                return item.interaction = item.interaction + '次';
            })
            list.sort((a, b) => {
                return b.listening - a.listening
            });
            this.list2 = list.slice(0, 8);
            for (let item of this.list2) {
                // // 将听课时长转成需要的格式
                let h = parseInt(item.listening / 60);
                let m = item.listening % 60;
                item.listening = '';
                if (h > 0) {
                    item.listening = h + '小时';
                }
                if (m > 0) {
                    item.listening = item.listening + m + '小时';
                }
            }


            // console.log(this.tableData[0]);
            this.currentData = this.tableData.slice((this.currentPage - 1) * 6, this.currentPage * 6);
        })

    },
    components: {
        CircleCheck,
        CircleCheckFilled
    },
    methods: {
        getWantList() {
            getStudentList({
                type: this.class1Select,
                className: this.class2Select,
            }).then(res => {
                if (res.code == '200') {
                    this.tableData = res.data;
                    let count = 0;
                    this.tableData.forEach(item => {
                        if (item.isArrive == '已出勤') {
                            count++;
                        }
                    })
                    this.arriveStu = count;
                    this.currentData = this.tableData.slice((this.currentPage - 1) * 6, this.currentPage * 6);
                } else {
                    ElMessage(res.msg)
                }
            })
        },
        changeData() {
            this.currentData = this.tableData.slice((this.currentPage - 1) * 6, this.currentPage * 6);
        },
        // 点击点赞
        changeBtn(row) {
            row.isApproval = !row.isApproval;
        },
    }
}
</script>
<template>
    <div class="attend">
        <div class="operation">
            <label for="">课程选择</label>
            <el-select v-model="class1Select" style="width: 115px" placeholder=" " @change="getWantList">
                <el-option value="" />
                <el-option value="离散分析" />
                <el-option value="线性代数" />
                <el-option value="微积分" />
                <el-option value="高等数学" />
                <el-option value="前端HTML5" />
            </el-select>

            <label for="">班级选择</label>
            <el-select v-model="class2Select" style="width: 115px" placeholder=" " @change="getWantList">
                <el-option value="" />
                <el-option value="2210" />
                <el-option value="2211" />
                <el-option value="2212" />
                <el-option value="2213" />
                <el-option value="2214" />
                <el-option value="2215" />
            </el-select>
        </div>

        <div class="nowData">
            <div class="nowInfo">
                <div class="allStu">
                    <h2>{{ tableData.length }} 人</h2>
                    <p>应到人数</p>
                </div>
                <div class="arriveStu">
                    <h2>{{ arriveStu }} 人</h2>
                    <p>实到人数</p>
                </div>
                <div class="notArriveStu">
                    <h2>{{ tableData.length - arriveStu }} 人</h2>
                    <p>缺勤人数</p>
                </div>
            </div>
            <div class="students">
                <el-table :data="currentData" style="width: 100%">
                    <el-table-column prop="stuId" label="学员ID" />
                    <el-table-column prop="stuNickname" label="学员昵称" />
                    <el-table-column prop="stuTel" label="联系电话" />
                    <el-table-column prop="isArrive" label="是否出勤" />
                </el-table>
                <el-pagination v-model:current-page="currentPage" @currentChange="changeData"
                    layout="prev, pager, next, jumper" :total="tableData.length" :pageSize="6" />
            </div>
        </div>
        <div class="rankingList">
            <div class="List1">
                <span class="title">互动排行榜</span>
                <el-table :data="list1">
                    <el-table-column type="index" :index="1" label="排名" width="80" />
                    <el-table-column prop="stuId" label="学员ID" />
                    <el-table-column prop="stuNickname" label="学员昵称" />
                    <el-table-column prop="interaction" label="互动频次" />
                    <el-table-column label="点赞">
                        <template #default="scope">
                            <div @click="changeBtn(scope.row)">
                                <el-icon v-show="!scope.row.isApproval">
                                    <CircleCheck />
                                </el-icon>
                                <el-icon v-show="scope.row.isApproval">
                                    <CircleCheckFilled />
                                </el-icon>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="List2">
                <span class="title">听课排行榜</span>
                <el-table :data="list2">
                    <el-table-column type="index" :index="1" label="排名" width="80" />
                    <el-table-column prop="stuId" label="学员ID" />
                    <el-table-column prop="stuNickname" label="学员昵称" />
                    <el-table-column prop="listening" label="听课时间" />
                    <el-table-column label="点赞">
                        <template #default="scope">
                            <div @click="changeBtn(scope.row)">
                                <el-icon v-show="!scope.row.isApproval">
                                    <CircleCheck />
                                </el-icon>
                                <el-icon v-show="scope.row.isApproval">
                                    <CircleCheckFilled />
                                </el-icon>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

        </div>

    </div>
</template>
<style lang="scss" scoped>
.attend {
    color: black;
    overflow: hidden;

    .operation {
        margin: 10px;

        .el-select {
            margin-right: 200px;
        }
    }

    .nowData {
        height: 320px;
        display: flex;
        margin-bottom: 30px;

        .students {
            flex: 1;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: hidden;

            .el-table {
                --el-table-header-bg-color: #4b19d1;
                overflow: hidden;
            }
        }

        .nowInfo {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 300px;
            height: 100%;

            div {
                h2 {
                    font-size: 30px;
                }

                p {
                    color: #ccc;
                }
            }

            .allStu {
                color: blue;
            }

            .arriveStu {
                color: green;
            }

            .notArriveStu {
                color: red;
            }
        }
    }


    .rankingList {
        display: flex;

        .List1 {
            margin-right: 10px;
        }

        .List1,
        .List2 {
            width: 48%;
            height: 100%;
            display: flex;
            flex-direction: column;

            .el-table {
                --el-table-header-bg-color: #4b19d1;
            }

            .title {
                position: relative;
                margin-left: 20px;

                .title::before {
                    display: block;
                    content: '';
                    width: 5px;
                    height: 5px;
                    border-radius: 100%;
                    background-color: black;
                    position: absolute;
                    left: -10px;
                    top: 10px;
                }
            }

            /* .active{
                color:red
            }*/
        }
    }
}

.title {
    position: relative;
    margin-left: 20px;
}

.title::before {
    display: block;
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 100%;
    background-color: black;
    position: absolute;
    left: -10px;
    top: 10px;
}

.el-input {
    width: 200px;
    margin: 0 20px;
}
</style>
<style>
.el-main {
    overflow: hidden;
}
</style>